import React from 'react';
import { Button, Image, ScrollView, StyleSheet, Text, View } from 'react-native';

const MM: React.FC = () => {
    return (
        <>

            <Image source={require('./lp0.jpeg')} style={{ width: 500, height: 800 }} />
            <Image source={require('./lp1.jpeg')} style={{ width: 500, height: 700 }} />
            <Image source={require('./lp2.jpeg')} style={{ width: 500, height: 900 }} />
        </>
    )
}
const BB: React.FC = () => {
    return (
        <>
            <Image source={require('./lp1.jpeg')} style={{ width: 500, height: 800 }} />
        </>
    )
}
const GG: React.FC = () => {
    return (
        <>
            <Image source={require('./gg0.jpeg')} style={{ width: 500, height: 400 }} />
            <Image source={require('./gg1.jpeg')} style={{ width: 500, height: 800 }} />
            <Image source={require('./gg2.jpeg')} style={{ width: 500, height: 200 }} />
        </>
    )
}
export type Props = {

    isShow?: () => void;
};

const Picture: React.FC<Props> = ({ isShow }) => {
    const onIncrement = async () => {
        const res = await fetch('https://geektutu.com/tool/comments.json', {
            method: 'POST',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                firstParam: 'yourValue',
                secondParam: 'yourOtherValue',
            }),
        });
        const json = await res.json();
        alert(JSON.stringify(json))
        return json;
    };
    const onDecrement = () => alert(Math.random() * 10);
    let [titleIndex, setTitleIndex] = React.useState<number>(0);
    let titleStatus = ['花花', '草草', '世界'];
    const pics = [<MM />, <GG />, <BB />]
    return (
        <View style={styles.container}>
            <View style={{
                marginTop: 27, marginBottom: 1, flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center',
                justifyContent: 'center'
            }}>
                <Button title={titleStatus[titleIndex]} onPress={() => setTitleIndex(x => x === 2 ? 0 : x + 1)} />
                <Button title={titleStatus[titleIndex]} onPress={() => setTitleIndex(x => x === 2 ? 0 : x + 1)} />
                <Button title={titleStatus[titleIndex]} onPress={() => setTitleIndex(x => x === 2 ? 0 : x + 1)} />
                <Button title={titleStatus[titleIndex]} onPress={() => setTitleIndex(x => x === 2 ? 0 : x + 1)} />
                <Button title={titleStatus[titleIndex]} onPress={() => setTitleIndex(x => x === 2 ? 0 : x + 1)} />
                <Button title={titleStatus[titleIndex]} onPress={isShow} />
                <Button title={titleStatus[titleIndex]} onPress={onDecrement} />
                <Button title={titleStatus[titleIndex]} onPress={onIncrement} />
            </View>
            <ScrollView style={{ flex: 2 }}>
                {pics[titleIndex]}
            </ScrollView>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        // alignItems: 'center',
        justifyContent: 'center',
    },
    button: {
        paddingHorizontal: 8,
        paddingVertical: 6,
        borderRadius: 4,
        backgroundColor: 'oldlace',
        alignSelf: 'flex-start',
        marginHorizontal: '1%',
        marginBottom: 6,
        minWidth: '48%',
        textAlign: 'center',
    }
});
export default Picture;